Using Claude Design
to Build Ultimate Products

PHASE 1 - CONTEXT INJECTION
  - Feed in: product brief, user personas, brand files, competitor screenshots
  - Feed in: your design system (codebase or Figma link)
  - State explicitly: scope, audience, device targets, constraints

PHASE 2 - WIDE EXPLORATION (3-5 directions)
  - Ask Claude for 3 distinct design directions (NOT 3 variations of the same)
  - Each direction: different layout philosophy, hierarchy, and visual voice
  - Pick the strongest direction OR ask Claude to synthesise the best elements

PHASE 3 - DEEP ITERATION
  - Use inline comments to pin exact elements to change
  - Use adjustment sliders (Claude creates these) for spacing/color/scale live
  - Iterate in conversation - not by re-starting from scratch each time

PHASE 4 - SYSTEM CONSISTENCY CHECK
  - Ask Claude to audit the entire design against your design system
  - Verify: colors, type scale, spacing, component states, responsive breakpoints
  - Ask for a final edge-case pass (empty states, error states, loading states)

PHASE 5 - EXPORT AND HANDOFF
  - Export to Canva (for marketing polish), PPTX (for pitches), PDF, or HTML
  - OR: handoff to Claude Code with a single instruction for production build

You are designing [PRODUCT NAME], a [TYPE: web app / mobile app / SaaS dashboard / landing page].

PRODUCT BRIEF:
- Purpose: [What it does in one sentence]
- Primary audience: [Who uses it - be specific: "B2B procurement managers" not "businesses"]
- Core user action: [The ONE thing users must be able to do immediately]
- Tone: [e.g., "clinical and precise" / "bold and energetic" / "calm and trustworthy"]

BRAND CONSTRAINTS:
- Apply my stored design system automatically
- Primary action color: [HEX if not in system]
- Typography: [Font names if not in system]
- Do NOT use: [e.g., "gradients / rounded corners beyond 4px / drop shadows"]

DEVICE TARGET: [desktop-first / mobile-first / both - responsive]

DELIVERABLE FOR THIS PASS:
Generate 3 DISTINCT design directions for the [homepage / main dashboard / onboarding flow].
Each direction must have a fundamentally different layout philosophy and visual hierarchy.
Label them Direction A, B, C with a 2-line rationale for each.
Do not generate 3 variations of the same layout.

Convert this spec into a fully interactive prototype.

SPEC / WIREFRAME:
[Paste your wireframe description OR attach the image]

INTERACTION REQUIREMENTS:
- Clickable: [List elements that must be clickable - buttons, nav, cards]
- State changes: [Hover, active, disabled states required]
- Animations: [None / subtle transitions only / full motion]
- Data: [Use placeholder realistic data - not "Lorem Ipsum" - real-looking names, numbers, dates]

FIDELITY: [Low / Medium / High] fidelity prototype
- Low = grayscale structure only
- Medium = brand colors + real type, no final imagery
- High = production-ready appearance

CONSTRAINT: The prototype must run inside Claude Design's HTML output.
Do not reference any external API or live data source.
All states must be simulated inline.

Build a professional pitch deck for [COMPANY / PRODUCT NAME].

NARRATIVE STRUCTURE:
1. Problem (1 slide) - [The pain point in one crisp statement]
2. Solution (1-2 slides) - [What you do and why it works]
3. Product Demo (2-3 slides) - [Key screens or flow screenshots]
4. Market Size (1 slide) - [TAM / SAM / SOM - use real figures or clearly label as estimates]
5. Business Model (1 slide) - [How money is made]
6. Traction (1 slide) - [Real metrics - do not fabricate; leave blank if none yet]
7. Team (1 slide) - [Names and roles only]
8. Ask (1 slide) - [What you need and what it funds]

DESIGN RULES:
- Apply my stored brand design system
- Max 30 words per slide (headline + supporting line only)
- No bullet lists - use visuals, icons, or data visualizations instead
- High-contrast, dark or light background (not grey)
- Export as PPTX when complete

TONE: [e.g., "authoritative and technical" / "bold startup energy" / "enterprise-grade trust"]

Run a full design system consistency audit on this design.

AUDIT CHECKLIST - check every item and report status:
[ ] Color usage - only design system tokens used, no one-off hex values
[ ] Typography - correct weights, sizes, and line heights per type scale
[ ] Spacing - consistent 4px or 8px grid applied throughout
[ ] Component states - all interactive elements have hover, focus, active, disabled states
[ ] Responsive - layout holds at 375px, 768px, 1280px, 1440px breakpoints
[ ] Empty states - every list or data view has an empty state designed
[ ] Error states - all forms and data inputs have error states designed
[ ] Loading states - async content areas have skeleton or loader states
[ ] Accessibility - text contrast minimum 4.5:1, touch targets minimum 44x44px
[ ] Copy consistency - button labels, headers, and CTAs use consistent verb tense and voice

For every [X] FAILED item:
- State exactly what is wrong
- Apply the fix inline
- Confirm it passes after fix

Report final pass/fail count at the end.

Design a high-converting landing page for [PRODUCT / OFFER].

PAGE GOAL: [Single CTA - e.g., "email signup" / "book a demo" / "download" / "purchase"]

AUDIENCE: [Who is landing here and from what channel - e.g., "Google Ads, searching 'database engine Rust'"]

ABOVE THE FOLD (must nail this section):
- Headline: [Your draft OR "generate 3 headline options"]
- Sub-headline: [Clarify who it's for and what they get]
- CTA button: [Label - be specific: "Start Free Trial" not "Sign Up"]
- Hero visual: [What to show: screenshot / illustration / demo / abstract]

PAGE SECTIONS (in order):
1. Social proof strip (logos or testimonials)
2. Problem / Pain agitation
3. Solution overview
4. 3 key features (visual-first, not bullet lists)
5. How it works (3 steps)
6. Testimonials (2-3)
7. Pricing or offer summary
8. Final CTA

DESIGN RULES:
- Apply my stored design system
- Mobile-first - design for 375px then scale up
- Export as standalone HTML when complete
- No stock photo faces - use abstract or product visuals only

Package this design for handoff to Claude Code for production implementation.

HANDOFF BUNDLE MUST INCLUDE:
1. Design system tokens (colors, type scale, spacing scale) as CSS custom properties
2. Component inventory - list every unique component with all states
3. Interaction spec - list every clickable element and its expected behavior
4. Asset list - every icon, image, and SVG needed (embed or reference)
5. Responsive spec - breakpoints and layout changes at each

TECH STACK TARGET:
- Framework: [React / Vue / plain HTML+CSS / Next.js]
- Styling: [Tailwind / CSS Modules / Styled Components / plain CSS]
- Language: [TypeScript / JavaScript]
- Any constraints: [e.g., "must work on cPanel shared hosting" / "no build step"]

WHEN BUNDLE IS READY:
Output a single instruction block I can paste into Claude Code to begin implementation.
That instruction must specify: component priority order, file structure, and the first
3 components to build first.